<template>
  <el-dialog title="订单打印" :visible.sync="visible" :before-close="closeDialog" width="210mm">
    <el-button
      type="warning"
      class="filter-item"
      size="mini"
      icon="el-icon-printer"
     v-print="printObj"
    >打印</el-button>
    <div id="printList">
      <div class="order-list" v-for="(list, index) in printList" :key="index" style="margin:20px 0">
        <el-descriptions title="订货单" :column="5">
          <el-descriptions-item label="订单号">{{ list.number }}</el-descriptions-item>
          <el-descriptions-item label="门店">{{ list.name }}</el-descriptions-item>
          <el-descriptions-item label="下单时间" :span="2">{{ list.createTime | dateYMDHMSFormat }}</el-descriptions-item>
          <el-descriptions-item label="类型">
            <el-tag size="small">{{list.isSelfMention ==1?"自提":"配送"}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系方式" v-if="list.isSelfMention==1">
            {{list.orderContacts}} {{list.phoneNumber}}
          </el-descriptions-item>
          <el-descriptions-item label="收货地址" v-if="list.isSelfMention==0 && list.address" :span="2">
            {{list.address.name}} {{list.address.address}} {{list.address.phoneNumber}}
          </el-descriptions-item>
          <el-descriptions-item label="实际支付">￥{{list.allPrice}}</el-descriptions-item>
          <el-descriptions-item label="文件名称" :span="2">{{list.fileName}}</el-descriptions-item>
          <el-descriptions-item label="打印范围">{{list.pageNumber == 0?"所有":list.pageNumber}}</el-descriptions-item>
          <el-descriptions-item label="用户备注" label-class-name="my-label"  :span="2">{{list.orderRemarks}}</el-descriptions-item>
          <el-descriptions-item label="商家备注" label-class-name="my-label"  :span="2">{{list.merchantRemarks}}</el-descriptions-item>
        </el-descriptions>

        <el-table
          border
          show-summary
          :data="list.storeOrderCommodityDetailsDTOList"
          :summary-method="getSummaries"
          size="small"
          style="width: 100%;"
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="commodityName" label="商品名称" />
          <el-table-column prop="groupValueList" label="商品规格">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isMultiSpecification == 0" size="small">默认</el-tag>
              <div v-else>
                <el-tag v-for="g in scope.row.groupValueList" :key="g.groupValueId" style="margin-right: 10px;" size="small">{{g.groupValueName}}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="unitPrice" label="单价" />
          <el-table-column prop="quantity" label="数量" />
          <el-table-column prop="cartInfoMap" label="小计(元)">
            <template slot-scope="scope">
              <span>{{ scope.row.unitPrice * scope.row.quantity }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    title: String,
    visible: {
      type: Boolean,
      default: false
    },
    printList: {
      type: Array
    }
  },
  data() {
    return {
      printObj: {
        id: "printList",
        popTitle: '订单打印',
        beforeOpenCallback () {
          console.log('打开之前')
        },
        openCallback () {
          console.log('执行了打印')
        },
        closeCallback (vue) {
          console.log('关闭了打印工具')
          vue.closeDialog()
        }
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog")
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        } else if (index === 5) {
          const values = data.map(item => Number(item.unitPrice * item.quantity));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        }
      });
      return sums;
    }
  }
}
</script>
<style scoped>
.el-select {
  width: 100%;
}
</style>